<template>
  <div>
      <topnav title="我的钱包"></topnav>
      <div class="help">
          <router-link to="recharge">
          <span>充值</span>
          </router-link>
      </div>
    <div class="top">
        <div class="space"></div>
        <div class="content">
            <li>
                <P>我的余额(CNY)</P>
                
            </li>
            <li>
                <h1>{{info.balance}}.00</h1>
                <p>
                    <span @click="gocash">提现</span>
                    <a href="#"></a>
                </p>
            </li>
            <li>
                <p>昨日收益：￥20000.00</p>
                <p>累计收益：￥30000.00</p>
            </li>
        </div>
    </div>
      <div class="tit">
        <span></span>
        <p>收益明细</p>
        <a href="#"></a>
        <p>查看全部</p>
      </div>
      <div class="list">
          <ul>
              <li>
                  <p>出售金玉5条</p>
                  <span>+2000.00</span>
              </li>
              <li>
                  <p>收益到账</p>
                  <span>06-01 22.00</span>
              </li>
            </ul>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import api from  "../../axios/api"
export default {
    data(){
        return{
            info:[]
        }
    },
    mounted(){
        this.getuser()
    },
    methods:{
       gocash(){
           this.$router.push("cash")
       },
       getuser(){
           let data={
            id:localStorage.getItem("id"),
        }
           this.$post(api.userinfo,data).then(res=>{
        if(res.code == 0){
        
            this.info = res.data
        }else{
            this.$toast(res.error)
        }
    })
       }
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 1px;
    background-color: #ff6a10;
}
.help{
    span{
        display: block;
        width: 40px;
        height: 20px;
        color: #fff;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 9999;
        background-size: 100%;
    }
}
.top{
    background-color: #ff6a10;
    height: 90px;
    margin-bottom: 90px;
    .content{
        width: 90%;
        height: 150px;
        margin: 0 auto;
        margin-top: 0px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 2px 2px 10px #d3d3d3;
        li{
            display: flex;
            font-size: 13px;
        }
        li:nth-child(1){
            padding-top: 10px;
            align-items: center;
            p{
               width: 65%;
               margin-left: 20px;
            }
            
        }
         li:nth-child(2){
             align-items: center;
             h1{
                 width: 75%;
                 font-size: 35px;
                 margin-left: 20px;
             }
             p{
                 display: flex;
                 align-items: center;
                 a{
                display: block;
                width: 6px;
                height: 10px;
                background: url("../../assets/user/back.png") no-repeat;
                background-size: 100%;
                margin-left: 10px;
            }
             }
             
         }
         li:nth-child(3){
             justify-content: space-around;
             p{
                 font-size: 12px;
             }
         }
    }
}
.tit{
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    span{
        width: 6px;
        height: 20px;
        border-radius: 10px;
        background-color: #ff6a10;
    }
    p{
        font-size: 16px;
        margin-left: 5px;
    }
    a{
        width: 10px;
        height: 10px;
        background: url("../../assets/user/menu.png") no-repeat;
        background-size: 100%;
        margin-left: 55%;
    }
    p:nth-child(4) {
        font-size: 12px;
    }
}
.list{
    width: 90%;
    height: 70px;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #d3d3d3;
 ul{
     padding: 15px;
    li{
        display: flex;
        font-size: 15px;
        p{
            width: 70%;
            color: #000;
        }
        span{
            color: #ff6a10;
            font-size: 20px;
            font-weight: 600;
        }
    }
    li:nth-child(2){
        p{
            color: #7a7a7a;
            font-size: 12px;
        }
        span{
            font-size: 12px;
            color: #7a7a7a;
            margin-left: 15px;
        }
    }
 }
}
</style>